<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>学会人员资料</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

	<style>
		html,
		body {
			width: 100%;
			min-height: 100%;
			background: #f0f0f0;
		}

		.h20 {
			height: 0.5rem;
			background: #f0f0f0;
		}

		#header_top {
			background: #2997e4;
			padding-top: 25px;
		}
		/* 数据 */

		.declare li .cont_list {
			padding: 0.75rem 0;
			display: block;
			width: 100%;
		}

		.cont_list span {
			float: left;
			color: #999;
			margin-right: 1rem;
		}

		.cont_list h6 {
			color: #333;
		}

		.cont_list h6 span {
			color: #333;
			float: none;
			margin-right: 1rem;
		}

		.aui-list .aui-list-item-right,
		.aui-list-item-title-row em {
			max-width: none;
		}

		.enshrine .dataIco_inner {
			width: 3rem;
			height: 3rem;
			border-radius: 50%!important;
			-webkit-border-radius: 50%!important;
			overflow: hidden;
		}

		.enshrine .dataIco img {
			width: 100%;
			min-height: 100%;
		}

		.declare .xq span {
			color: #999;
			margin-right: 0.5rem;
		}

		.declare ul,
		.declare ul li:nth-of-type(1) .aui-list-item,
		.declare ul li:nth-last-of-type(1) .aui-list-item {
			background-size: 0;
		}

		.save_but {
			background-color: #2997e4;
			font-size: 0.8rem;
			color: #fff;
			padding: 0.5rem 0;
			margin: 2rem 0.75rem 0;
			text-align: center;
			border-radius: 4px;
		}

		.enshrine .aui-list-item-inner {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}

		.name {
			font-size: 0.8rem;
			color: #333
		}

		.zy {
			color: #999;
			font-size: 0.6rem;
		}

		.declare ul,
		.declare ul li:nth-of-type(1) .aui-list-item,
		.declare ul li:nth-last-of-type(1) .aui-list-item {
			background-size: 0;
		}
	</style>
</head>

<body>
	<header id="header_top" class="aui-bar aui-bar-nav">

		<a class="aui-pull-left" onclick="goback()">
			<span class="aui-iconfont aui-icon-left"></span>
		</a>
		<div class="aui-title" id="title">
			会员信息
		</div>
	</header>
	<div id="app" v-cloak>
		<!-- 第一块 -->
		<div class="h20"></div>
		<div class="aui-content enshrine">
			<ul class="aui-list aui-media-list">
				<li class="aui-list-item">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media dataIco">
							<div class="dataIco_inner">
								<img :src="info.headImg" v-if="info.headImg && info.headImg != ''">
								<img src="../../image/wdr@3x.png" v-else>
							</div>
						</div>
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title name">{{info.nickname}}</div>
							</div>
							<div class="aui-margin-t-5">
								<div class="aui-info-item zy">{{info.profession}}</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="h20"></div>

		<!-- 第二块 -->
		<div class="aui-content declare">
			<ul class="aui-list aui-list-in">
				<li>
					<div class="aui-list-item-inner aui-list-item">
						<div class="cont_list">
							<span>性别</span>
							<h6 v-if="info.sex == 1">男</h6>
							<h6 v-else-if="info.sex == 2">女</h6>
						</div>
					</div>
				</li>
				<li>
					<div class="aui-list-item-inner aui-list-item">
						<div class="cont_list">
							<span>地区</span>
							<h6>{{info.address}}</h6>
						</div>
					</div>
				</li>
				<li>
					<div class="aui-list-item-inner aui-list-item">
						<div class="cont_list">
							<span>年龄</span>
							<h6>{{info.age}}</h6>
						</div>
					</div>
				</li>
				<li>
					<div class="aui-list-item-inner aui-list-item">
						<div class="cont_list">
							<span>职业</span>
							<h6>{{info.profession}}</h6>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="h20"></div>

		<!-- 第三块 -->
		<div class="aui-content declare">
			<ul class="aui-list aui-list-in">
				<li>
					<div class="aui-list-item-inner aui-list-item">
						<div class="cont_list">
							<span>兴趣</span>
							<!-- <h6><span>摄影</span><span>篮球</span><span>交友</span></h6> -->
							<h6>{{info.interest}}</h6>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<!-- 保存按钮 -->
		<div v-if="isID" class="save_but" @click="to_chat(info.userid,info.nickname)">
			打招呼
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	function goback() {
		api.closeWin({
			name: api.pageParam.name
		});
	}


	//打开聊天窗口
	function to_chat(id, name,type) {
		console.log(name);
		api.openWin({
			name: 'user_info_' + id,
			url: '../forth_frame/user_info_details_win.html',
			pageParam: {
				id: id,
				name: name,
				chat_type:'PRIVATE'
			}
		});
	}




	apiready = function() {

		var app = new Vue({
			el: '#app',
			data: {
				id: 0,
				info: {},
				isID: 1
			},
			created: function() {
				var $_this = this;
				$_this.id = api.pageParam.id
				// console.log($_this.id)
				if($api.getStorage('data').userid == $_this.id) {$_this.isID = 0}
				api.ajax({
					url: window.Url.getOthorUser + $_this.id,
					timeout: 300,
				}, function(ret, err) {
					if (ret) {
						// api.alert({ msg: JSON.stringify(ret) });
						$_this.info = ret.data

					} else {
						api.alert({
							msg: JSON.stringify(err)
						});
					}
				})
			},
			methods: {}
		})
	}
</script>

</html>
